import React, { Component } from 'react'
import axios from 'axios'
import BetterScroll from 'better-scroll'
export default class App extends Component {
  state = {
    myname: '张三',
    list: []
  }
  render() {
    return (
      <div>
        <button onClick={() => this.setState({ myname: '李四' })}>click</button>
        <div id="myname">{this.state.myname}</div>
        <div id="warpper" style={{
          height: "100px", overflow: "hidden", background: "yellow"
        }}>
          <ul>
            {
              this.state.list.map(item =>
                <li key={item.filmId}>{item.name}</li>
              )
            }
          </ul>
        </div>
      </div>
    )
  }
  componentDidMount() {
    axios.get('/test.json').then(response => {
      console.log(response)
      this.setState({
        list: response.data.data.films
      })
    })
  }
  componentWillUpdate() {
    //TODO:准备
    console.log(document.getElementById('myname').innerHTML);
  }
  componentDidUpdate(prevProps,prevState) {
    //TODO:更新完成
    console.log(document.getElementById('myname').innerHTML);
    console.log(prevState.list)
        if(prevState.list.length===0){
            new BetterScroll("#warpper")
        }
  }
}
